<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>
    <link rel="stylesheet" href="style1.css">
    <style type="text/css">
    </style>
</head>
<body>
<div id="nav">
    <table style="width: 100%; height: 100%">
        <tr>
            <div id="box">
                <div class="txt">小米秒杀</div>
                <div class="words"><strong>20:00</strong> 点场 倒计时</div>
                <div class="hour"></div>
                <!-- 小时与分钟之间的冒号 -->
                <span class="h_m">:</span>
                <div class="minute"></div>
                <!-- 分钟与秒之间的冒号 -->
                <span class="m_s">:</span>
                <div class="second"></div>
                <div class="txt1"><a href="https://www.mi.com/seckill">进入</a></div>
            </div>
        </tr>
    </table>
</div>


<!-- top-header -->
<div class="top" id="top">
    <div class="w">

        <!-- 左侧导航 -->
        <div class="top-nav-1">
            <ul>
                <li>
                    <a href="#" >小米商城</a>
                    <span class="sep">|</span>
                </li>
                <li>
                    <a href="#">MIUI</a>
                    <span class="sep">|</span>
                </li>
                <li>
                    <a href="#">IoT</a>
                    <span class="sep">|</span>
                </li>
                <li>
                    <a href="#">云服务</a>
                    <span class="sep">|</span>
                </li>
                <li>
                    <a href="#">金融</a>
                    <span class="sep">|</span>
                </li>
                <li>
                    <a href="#">有品</a>
                    <span class="sep">|</span>
                </li>
                <li>
                    <a href="#">小爱开放平台</a>
                    <span class="sep">|</span>
                </li>
                <li>
                    <a href="#">政企服务</a>
                    <span class="sep">|</span>
                </li>
                <li>
                    <a href="#">Select Region</a>
                    <span class="sep">|</span>
                </li>
            </ul>
        </div>

        <!-- 购物车 -->
        <a href="#" class="gouwu">
            <div class="gou"></div>
            <div class="gou-in">
                <img src="D:/Web/tu/5.jpg" >
            </div>

        </a>

        <!-- 右侧导航 -->
        <div class="top-nav-2">
            <a href="#">登录</a>
            <span class="sep">|</span>
            <a href="#">注册</a>
            <span class="sep">|</span>
            <a href="#" class="massage">消息通知</a>

        </div>
    </div>
</div>

<!-- header -->
<div class="header w">

    <!-- logo -->
    <div class="logo">
    </div>

    <!-- nav -->
    <div class="nav">
        <ul>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">红米</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">空调</a></li>
            <li><a href="#">新品</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
        </ul>
    </div>

    <!-- search -->
    <div class="search">
        <input type="text" >
        <button></button>
        <div class="sea-1">
            <span class="sea-11">小米8</span>
            <span class="sea-12">小米MIX 2S</span>
        </div>

    </div>
</div>

<!-- banner -->
<div class="banner w">
    <img src="D:/Web/tu/8.jpg" alt="">
    <!-- subnav -->
    <div class="subnav">
        <ul>
            <li><a href="#">手机 电话卡<span class="icon1">></span></a></li>
            <li><a href="#">电视 盒子<span class="icon1">></span></a></li>
            <li><a href="#">笔记本 平板<span class="icon1">></span></a></li>
            <li><a href="#">家电 插线板<span class="icon1">></span></a></li>
            <li><a href="#">出行 穿戴<span class="icon1">></span></a></li>
            <li><a href="#">智能 路由器<span class="icon1">></span></a></li>
            <li><a href="#">电源 配件<span class="icon1">></span></a></li>
            <li><a href="#">个护 儿童<span class="icon1">></span></a></li>
            <li><a href="#">耳机 音箱<span class="icon1">></span></a></li>
            <li><a href="#">生活 箱包<span class="icon1">></span></a></li>
        </ul>
    </div>

    <!-- 轮播图 -->
    <div class="ban-l"><</div>
    <div class="ban-r">></div>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>

<!-- goods -->
<div class="goods w">
    <ul>
        <li><a href="#"><img src="D:/Web/tu/5.png" ></a></li>
        <li><a href="#"><img src="D:/Web/tu/9.png" ></a></li>
        <li><a href="#"><img src="D:/Web/tu/10.png" ></a></li>
        <li><a href="#"><img src="D:/Web/tu/11.png" ></a></li>
    </ul>
</div>

<!-- shangou -->
<div class="shangou w">

    <!-- 上部分 -->
    <div class="sg-hd">
        <h4>小米闪购</h4>
        <img src="D:/Web/tu/7.jpg" >
    </div>

    <!-- 下部分 -->
    <div class="sg-bd clearfix">
        <ul>
            <li><img src="D:/Web/tu/16.jpg" class="special"></li>
            <li>
                <a href="#" >
                    <img src="D:/Web/tu/12.jpg" >
                    <h4>最生活毛巾-青春系列 白色</h4>
                    <p>3秒吸水,杀菌无刺激</p>
                    <span><em>1 元</em> <del>19.9元</del></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="D:/Web/tu/13.jpg" >
                    <h4>90分旅行箱 1A 20英寸 星空灰</h4>
                    <p>可随身携带</p>
                    <span><em>149 元</em> <del>299元</del></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="D:/Web/tu/14.jpg" >
                    <h4>90分旅行箱 1A 20英寸 星空灰</h4>
                    <p>长途旅行航空托运箱</p>
                    <span><em>224 元</em> <del>449元</del></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="D:/Web/tu/15.jpg" >
                    <h4>小米插线板 (含3口USB)</h4>
                    <p>3个USB充电口,支持快充</p>
                    <span><em>44 元</em> <del>49元</del></span>
                </a>
            </li>
        </ul>
    </div>
</div>

<!-- ads -->
<div class="ads w">
    <a href="#"><img src="D:/Web/tu/17.jpg" ></a>
</div>

<!-- page-main -->
<div class="page-main ">

    <!-- phone -->
    <div class="phone w">

        <!-- 上部分 -->
        <div class="pho-hd">
            <h4>手机</h4>
            <a href="#">查看全部></a>
        </div>

        <!-- 下部分 -->
        <div class="pho-bd">
            <div class="pho-bd-le">
                <a href="#"><img src="D:/Web/tu/18.jpg" ></a>
            </div>
            <div class="pho-bd-ri">
                <ul>
                    <li>
                        <a href="#" >
                            <img src="D:/Web/tu/19.jpg" >
                            <h4>红米6A</h4>
                            <p>AI人脸解锁,小巧全面屏,高性能</p>
                            <span><em>549元</em> <del>599元</del></span>
                        </a>
                        <div class="jian50">
                            减 50 元
                        </div>
                    </li>
                    <li>
                        <a href="#" >
                            <img src="D:/Web/tu/19.jpg" >
                            <h4>红米6A</h4>
                            <p>AI人脸解锁,小巧全面屏,高性能</p>
                            <span><em>549元</em> <del>599元</del></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" >
                            <img src="D:/Web/tu/19.jpg" >
                            <h4>红米6A</h4>
                            <p>AI人脸解锁,小巧全面屏,高性能</p>
                            <span><em>549元</em> <del>599元</del></span>
                        </a>
                        <div class="jian50">
                            减 50 元
                        </div>
                    </li>
                    <li>
                        <a href="#" >
                            <img src="D:/Web/tu/19.jpg" >
                            <h4>红米6A</h4>
                            <p>AI人脸解锁,小巧全面屏,高性能</p>
                            <span><em>549元</em> <del>599元</del></span>
                        </a>
                        <div class="jian50">
                            减 50 元
                        </div>
                    </li>
                    <li>
                        <a href="#" >
                            <img src="D:/Web/tu/19.jpg" >
                        </a>
                    </li><li>
                    <a href="#" >
                        <img src="D:/Web/tu/19.jpg" >
                    </a>
                </li>
                    <li>
                        <a href="#" >
                            <img src="D:/Web/tu/19.jpg" >
                        </a>
                    </li>
                    <li>
                        <a href="#" >
                            <img src="D:/Web/tu/19.jpg" >
                        </a>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <!-- ads -->
    <div class="ads w">
        <a href="#"><img src="D:/Web/tu/21.jpg" ></a>
    </div>

    <!-- jiadain -->
    <div class="jiadian w clearfix">

        <!-- 上部分 -->
        <div class="jia-hd ">
            <h4>家电</h4>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">电视影音</a></li>
                <li><a href="#">电脑</a></li>
                <li><a href="#">家居</a></li>
            </ul>
        </div>
        <div class="jia-bd clearfix">
            <ul>
                <li><a href="#"><img src="D:/Web/tu/20.jpg" ></a></li>
                <li><a href="#"><img src="D:/Web/tu/22.jpg" ></a></li>
                <li><a href="#"><img src="D:/Web/tu/23.png" ></a></li>
                <li><a href="#"><img src="D:/Web/tu/24.png" ></a></li>
                <li><a href="#"><img src="D:/Web/tu/25.png" ></a></li>
                <li><a href="#"><img src="D:/Web/tu/26.jpg" ></a></li>
                <li><a href="#"><img src="D:/Web/tu/22.jpg" ></a></li>
                <li><a href="#"><img src="D:/Web/tu/23.png" ></a></li>
                <li><a href="#"><img src="D:/Web/tu/24.png" ></a></li>
                <li><a href="#"><img src="D:/Web/tu/25.png" ></a></li>
            </ul>
        </div>
    </div>
</div>

<!-- footer -->
<div class="footer">

    <!-- weixiu -->
    <div class="weixiu w">
        <ul>
            <li><a href="#">预约维修服务</a><span class="seu">|</span></li>
            <li><a href="#">7天无理由退货</a><span class="seu">|</span></li>
            <li><a href="#">15天免费换货</a><span class="seu">|</span></li>
            <li><a href="#">满150包邮</a><span class="seu">|</span></li>
            <li><a href="#">520余家售后网点</a></li>
        </ul>
    </div>

    <!-- fuwu -->
    <div class="fuwu w">

        <div class="fu-le">
            <dl>
                <dt><a href="#">帮助中心</a></dt>
                <dd><a href="#">账户管理</a></dd>
                <dd><a href="#">购物指南</a></dd>
                <dd><a href="#">订单操作</a></dd>
            </dl>
            <dl>
                <dt><a href="#">服务支持</a></dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">自助服务</a></dd>
                <dd><a href="#">相关下载</a></dd>
            </dl>
            <dl>
                <dt><a href="#">线下门店</a></dt>
                <dd><a href="#">小米之家</a></dd>
                <dd><a href="#">服务网点</a></dd>
                <dd><a href="#">授权体验店</a></dd>
            </dl>
            <dl>
                <dt><a href="#">关于小米</a></dt>
                <dd><a href="#">了解小米</a></dd>
                <dd><a href="#">加入小米</a></dd>
                <dd><a href="#">投资者关系</a></dd>
            </dl>
            <dl>
                <dt><a href="#">关注我们</a></dt>
                <dd><a href="#">新浪微博</a></dd>
                <dd><a href="#">官方微信</a></dd>
                <dd><a href="#">联系我们</a></dd>
            </dl>
            <dl>
                <dt><a href="#">特色服务</a></dt>
                <dd><a href="#">F码通道</a></dd>
                <dd><a href="#">礼物码</a></dd>
                <dd><a href="#">防伪查询</a></dd>
            </dl>
        </div>

        <div class="fu-ri">
            <h4>400-100-5678</h4>
            <p>周一至周日 8:00-18:00 </p>
            <p>(仅收市话费)</p>
            <a href="#">联系客服</a>
        </div>
    </div>

    <!-- copyright -->
    <div class="copyright w">
        <div class="logo"></div>
        <div class="co-nav">
            <a href="#">小米商城</a><span>|</span>
            <a href="#">MIUI</a><span>|</span>
            <a href="#">米家</a><span>|</span>
            <a href="#">米聊</a><span>|</span>
            <a href="#">多看</a><span>|</span>
            <a href="#">游戏</a><span>|</span>
            <a href="#">路由器</a><span>|</span>
            <a href="#">米粉卡</a><span>|</span>
            <a href="#">政企服务</a><span>|</span>
            <a href="#">小米天猫店</a><span>|</span>
            <a href="#">隐私政策</a><span>|</span>
            <a href="#">问题反馈</a><span>|</span>
            <a href="#">廉政举报</a><span>|</span>
            <a href="#">Select Region</a><br>
            <p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号 <br>
                违法和不良信息举报电话: 185-0130-1238,    本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>
        </div>
        <div class="co-img">
            <img src="D:/Web/tu/27.jpg" >
        </div>
    </div>

    <!-- end -->
    <div class="xiaomi w">
        <h4>探索黑科技,小米为发烧而生! </h4>
    </div>

</div>
</body>
<script  type="text/javascript">
    //1、获取元素
    var hour = document.querySelector(".hour");
    var minute = document.querySelector(".minute");
    var second = document.querySelector(".second");
    var inputTime = +new Date("2022-12-12 20:00:00");//倒计时的结束时间，自己设置时间
    countDown();//先调用一次这个函数 防止第一次刷新页面有空白
    //2、开启定时器
    setInterval(countDown, 1000);//1000毫秒，每一秒钟调用一次函数
    //3、倒计时-时分秒函数
    function countDown() {
        var nowTime = +new Date(); //返回的是当前时间的总的毫秒数
        var times = (inputTime - nowTime) / 1000; // times是剩余时间的总的毫秒数
        var h = parseInt(times / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;//判断数值小于10的情况 如 0-9改为 00-09
        hour.innerHTML = h;//更改div里面的内容 把h给获取元素hour的内容
        var m = parseInt(times / 60 % 60);
        m = m < 10 ? "0" + m : m;
        minute.innerHTML = m;//同上
        var s = parseInt(times % 60);
        s = s < 10 ? "0" + s : s;
        second.innerHTML = s;//同上
    }
    window.onload = function () {
        var nav = document.getElementById('nav');
        window.onscroll = function () {
            var top = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop//w3c，各ie的兼容
            if (top >= 40) {
                addClass(nav, 'nav-fixed');
            } else {
                removeClass(nav, 'nav-fixed');
            }
        }
    }
    function addClass(ele, classname) {
        var oldClass = ele.className;
        var pattern = new RegExp('(^|\\s)' + classname + '(\\s|$)');
        if (!pattern.test(oldClass)) {
            ele.className += ' ' + classname;
        }
    }
    function removeClass(ele, classname) {
        var oldClass = ele.className;
        var pattern = new RegExp('(^|\\s)' + classname + '(\\s|$)');
        if (pattern.test(oldClass)) {
            ele.className = ele.className.replace(pattern, ' ');
        }
    }
    $('#close').click(function(){
        $('#one').css('display','none');
    });
</script>
</html>